<template>
  <div class="home">
    <transition :name="animate">
      <router-view class="Router"></router-view>
    </transition>
    <footer>
      <router-link tag="dl" to="/index">
        <dt>
          <van-icon name="wap-home" />
        </dt>
        <dd>
          首页
        </dd>
      </router-link>
      <router-link tag="dl" to="/shopcar">
        <dt>
          <van-icon name="shopping-cart-o" />
        </dt>
        <dd>
          购物车
        </dd>
      </router-link>
      <router-link tag="dl" to="/my">
        <dt>
          <van-icon name="manager-o" />
        </dt>
        <dd>
          我的
        </dd>
      </router-link>
    </footer>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'homes',
  components: {
  },
  data(){
    return{
      animate:''
    }
  },
  watch: {
    $route(to, from) {
      if(to.meta.index > from.meta.index){
        //设置动画名称
        this.animate= 'slide-left';
      }else{
        this.animate= 'slide-right';
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .home{
    width: 100%;
    height: 100%;
  }
  footer{
    width: 100%;
    height: 1rem;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    box-shadow: 0 0 10px rgba(239, 239, 239, 1);
    z-index: 999;
    dl{
      flex: 1;
      text-align: center;
      padding-top: 0.1rem;
      box-sizing: border-box;
      dt{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        font-size: 0.4rem;
      }
    }
    .router-link-active{
      color: red;
    }
  }
  .Router {
    position: absolute;
    left: 0;
    right: 0;
  }
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 800ms;
    position: absolute;
  }

  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

</style>